<template>
  <el-form-item :label="widget.name" :prop="widget.model">
    <template v-if="widget.type == 'input'">
      <el-input
        v-if="
          widget.options.dataType == 'number' ||
          widget.options.dataType == 'integer' ||
          widget.options.dataType == 'float'
        "
        v-model.number="dataModel"
        type="number"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :disabled="disabled"
      />
      <el-input
        v-else
        v-model="dataModel"
        :type="widget.options.dataType"
        :disabled="disabled"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'textarea'">
      <el-input
        v-model="dataModel"
        type="textarea"
        :rows="5"
        :disabled="disabled"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'number'">
      <el-input-number
        v-model="dataModel"
        :style="{ width: widget.options.width }"
        :step="widget.options.step"
        controls-position="right"
        :disabled="disabled"
        :min="widget.options.min"
        :max="widget.options.max"
      />
    </template>

    <template v-if="widget.type == 'radio'">
      <el-radio-group
        v-model="dataModel"
        :style="{ width: widget.options.width }"
        :disabled="disabled"
      >
        <el-radio
          v-for="(item, index) in widget.options.remote
            ? widget.options.remoteOptions
            : widget.options.options"
          :key="index"
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :label="item.value"
        >
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>{{
            widget.options.showLabel ? item.label : item.value
          }}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <el-checkbox-group
        v-model="dataModel"
        :style="{ width: widget.options.width }"
        :disabled="disabled"
      >
        <el-checkbox
          v-for="(item, index) in widget.options.remote
            ? widget.options.remoteOptions
            : widget.options.options"
          :key="index"
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :label="item.value"
        >
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>{{
            widget.options.showLabel ? item.label : item.value
          }}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time'">
      <el-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrow-control="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'date'">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="
          widget.options.timestamp ? 'timestamp' : widget.options.format
        "
        :format="widget.options.format"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'rate'">
      <el-rate
        v-model="dataModel"
        :max="widget.options.max"
        :disabled="disabled"
        :allow-half="widget.options.allowHalf"
      />
    </template>

    <template v-if="widget.type == 'color'">
      <el-color-picker
        v-model="dataModel"
        :disabled="disabled"
        :show-alpha="widget.options.showAlpha"
      />
    </template>

    <template v-if="widget.type == 'select'">
      <el-select
        v-model="dataModel"
        :disabled="disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :filterable="widget.options.filterable"
      >
        <el-option
          v-for="item in widget.options.remote
            ? widget.options.remoteOptions
            : widget.options.options"
          :key="item.value"
          :value="item.value"
          :label="
            widget.options.showLabel || widget.options.remote
              ? item.label
              : item.value
          "
        />
      </el-select>
    </template>

    <template v-if="['role', 'organize', 'menu'].indexOf(widget.type) != -1">
      <treeselect
        v-model="dataModel"
        :disabled="disabled"
        autoDeselectDescendants
        flat
        :options="widget.options.remoteOptions"
        :multiple="widget.options.multiple"
        :normalizer="normalizer1"
        :style="{ width: widget.options.width }"
        :placeholder="widget.options.placeholder"
      />
    </template>

    <template v-if="widget.type == 'user'">
      <el-select
        v-model="dataModel"
        :multiple="widget.options.multiple"
        filterable
        remote
        reserve-keyword
        :style="{ width: widget.options.width }"
        placeholder="请输入账号或名称搜索"
        :remote-method="getUser"
      >
        <el-option
          v-for="item in userList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </template>

    <template v-if="widget.type == 'dictionary'">
      <el-select
        v-model="dataModel"
        :multiple="widget.options.multiple"
        :style="{ width: widget.options.width }"
        placeholder=""
      >
        <el-option
          v-for="item in dictionaryList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </template>

    <template v-if="widget.type == 'switch'">
      <el-switch v-model="dataModel" :disabled="disabled" />
    </template>

    <template v-if="widget.type == 'slider'">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'imgupload'">
      <fm-upload
        :disabled="disabled"
        :imgData="dataModel"
        :type="widget.options.multiple"
        :length="widget.options.length"
        @change="changeImg"
      />
    </template>

    <template v-if="widget.type == 'editor'">
      <vue-editor
        v-model="dataModel"
          :disabled="disabled"
        :style="{ width: widget.options.width }"
      />
    </template>

    <template v-if="widget.type == 'cascader'">
      <el-cascader
        v-model="dataModel"
        :disabled="disabled"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{ width: widget.options.width }"
        :options="widget.options.remoteOptions"
      />
    </template>

    <template v-if="widget.type == 'text'">
      <span>{{ dataModel }}</span>
    </template>
  </el-form-item>
</template>

<script>
import FmUpload from "../Upload";
import { getAll as getRoles } from "@/api/system/role";
import { getTree } from "@/api/system/dept";
import crudUser from "@/api/system/user";
import crudDictDetail from "@/api/system/dictDetail";
import crudMenu from "@/api/system/menu";
export default {
  components: {
    FmUpload,
  },
  props: ["widget", "models", "rules", "remote", "disabled"],
  data() {
    return {
      dataModel: this.models[this.widget.model],
      userList: [],
      dictionaryList: [],
    };
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.widget.model] = val;
        this.$emit("update:models", {
          ...this.models,
          [this.widget.model]: val,
        });
        this.$emit("input-change", val, this.widget.model);
      },
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val[this.widget.model];
      },
    },
  },
  created() {
    if (this.widget.type == "role") {
      getRoles()
        .then((res) => {
          this.widget.options.remoteOptions = res.data;
        })
        .catch(() => {});
    } else if (this.widget.type == "organize") {
      getTree().then((res) => {
        this.widget.options.remoteOptions = res.data;
      });
    } else if (this.widget.type == "menu") {
      const param = { type: 0 };
      crudMenu.getMenusTree(param).then((res) => {
       this.widget.options.remoteOptions  = res.data;
      });


    } else if (this.widget.type == "dictionary") {
      crudDictDetail.get(this.widget.options.code).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.dictionaryList = res.data.content;
        }
      });
    }
  },

  methods: {
    getUser(query) {
      if (query !== "") {
        crudUser.list({ pageNo: 0, pageSize: 40, name: query }).then((res) => {
          if (res.code == 200) {
            this.userList = res.data.content;
          }
        });
      } else {
        this.userList = [];
      }
    },
    normalizer1(node) {
      if (node.children == null || !node.children.length) {
        delete node.children;
      }
      if (!node.data) {
        node.data = {
          code: "",
          name: "请选择",
        };
      }
      return {
        id: node.data.id,
        label: node.data.name || node.data.simplename,
        children: node.children,
      };
    },
    //图片的赋值
    changeImg(data) {
      let tempData = [];
      for (let item of data) {
        tempData.push(item.id);
      }
      this.dataModel = tempData.join(",");
    },
  },
};
</script>
